<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.svg.common.core.js" ></script>
    <script src="../libraries/RGraph.svg.common.ajax.js" ></script>
    <script src="../libraries/RGraph.svg.common.csv.js" ></script>
    <script src="../libraries/RGraph.svg.bar.js" ></script>
    
    <title>RGraph demo: An SVG Bar chart using the CSV reader</title>

    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="An SVG Bar chart using the CSV reader" />
    
</head>
<body>



    <h1>An SVG Bar chart using the CSV reader</h1>

    <br />

    <div style="background-color: #ffc; border: 2px solid #cc0; border-radius: 5px; padding: 5px;">
        <b>Note:</b>
        For browser security reasons the AJAX demos don't work offline (this demo
        is using the CSV reader option that reads data that's embedded in the page
        itself). You can view the demos on the RGraph website here:
        <a href="http://www.rgraph.net/demos/index.html#svg" target="_blank" rel="nofollow">
            http://www.rgraph.net/demos/index.html#svg
        </a>
    </div>


    <div id="klkl" style="display: none">
        Richard,8,4,7,6,5,3,4
        Dave,7,4,6,9,5,8,7
        Luis,4,3,5,2,6,5,4
        Kevin,4,2,8,9,6,7,3
        Joel,4,5,1,3,5,8,6
        Pete,4,5,6,3,5,8,6
    </div>

    <div style="width: 750px; height: 300px" id="chart-container"></div>
    
        <div id="fb-root"></div>
    <script>
        function loadFB (d)
        {
            var js, fjs = document.getElementsByTagName('script')[0];
            if (document.getElementById('facebook-jssdk')) {
                return;
            }
            
            js     = document.createElement('script');
            js.id  = 'facebook-jssdk';
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
            
            fjs.parentNode.insertBefore(js, fjs);
        }
        
        
        setTimeout(loadFB, 1500);
    </script>
    
    <style>
        div#sharePopup {
            display: inline-block;
            color: white;
            z-index: 2;
            min-width: 575px;
            height: 40px;
            margin-left: 100px;
            margin-top: 20px;
            margin-bottom: 20px;
            box-shadow: 1px -1px 2px #aaa;
            background-color: rgba(0,0,0,0.75);
            text-align: center;
            font-weight: bold;
            border-radius: 10px;
        }
    
        div#sharePopup span#label {
            position: relative;
            top: 5px;
        }
        
        div#sharePopup div.fb-like {
            text-align: center;
            display: inline-block;
            position: relative;
            top: 4px;
        }
    </style>
    
    <div id="sharePopup">
        <span id="label">If you like RGraph please share it:</span>
        <span style="display: inline-block; min-width: 225px">
            <div class="fb-like" data-href="https://www.rgraph.net" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
            <a href="javascript: null" onclick="window.open('http://www.twitter.com/share?url=https://www.rgraph.net&text=HTML5%20charts%20for%20the%20web%20with%20@_RGraph%20', 'twitter-sharer-window', 'top=50,left=50,width=700,height=300')"><img src="/images/twitter-60x20.png"  style="transform: translate(10px, 8px); box-shadow: 1px 1px 1px gray" border="0" /></a>
        </span>
    </div>

    <script>
        RGraph.CSV('id:klkl', function (csv)
        //RGraph.CSV('/sample.csv', function (csv)
        {
            /**
            * Fetch the first row of the CSV file, starting at the second column
            */
            var data = csv.getRow(0, 1);
            
            /**
            * Fetch the first column which become the labels
            */
            var labels = csv.getCol(0)
                labels.push('Fred')



            new RGraph.SVG.Bar({
                id: 'chart-container',
                data: data,
                options: {
                    colors: ['Gradient(blue:#66a)'],
                    xaxisLabels: labels
                }                    
            }).grow();
        });
    </script>







    <p></p>

    This goes in the documents header:
    <pre class="code">
&lt;script src="RGraph.svg.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.svg.common.ajax.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.svg.common.csv.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.svg.bar.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;div id="klkl" style="display: none"&gt;
    Richard,8,4,7,6,5,3,4
    Dave,7,4,6,9,5,8,7
    Luis,4,3,5,2,6,5,4
    Kevin,4,2,8,9,6,7,3
    Joel,4,5,1,3,5,8,6
    Pete,4,5,6,3,5,8,6
&lt;/div&gt;

&lt;div style="width: 750px; height: 300px" id="chart-container"&gt;&lt;/div&gt;
    [No canvas support]
&lt;/div&gt;
</pre>

    This is the code that generates the chart:
    <pre class="code">
&lt;script&gt;
    RGraph.CSV('id:klkl', function (csv)
    <span>//RGraph.CSV('/sample.csv', function (csv)</span>
    {
        /**
        * Fetch the first row of the CSV file, starting at the second column
        */
        var data = csv.getRow(0, 1);
        
        /**
        * Fetch the first column which become the labels
        */
        var labels = csv.getCol(0)
            labels.push('Fred')




        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: data,
            options: {
                colors: ['Gradient(blue:#66a)'],
                xaxisLabels: labels
            }                    
        }).grow();
    });
&lt;/script&gt;
</pre>



    

    <p>
        <a href="./#svg">&laquo; Back</a>
    </p>

</body>
</html>